<template>
  <Dialog v-bind="$attrs" v-on="$listeners" @submit="save">
    <template>
      <v-card flat min-height="188" class="pt-2 px-4 text-left">
        <v-form ref="form">
          <v-spacer>
            <v-col>
              <v-row no-gutters>
                <v-col :cols="3">Old Password</v-col>
                <v-col :cols="7" :offset="1">
                  <v-text-field
                    v-model="formData.oldPassword"
                    v-validate="{ required: true, is: newPassword }"
                    name="Old Password"
                    solo
                    dense
                    hide-details
                    class="white-input"
                    placeholder="old Password"
                    type="password"
                  ></v-text-field>
                  <span class="vee-validate-error">
                    {{ errors.first("Old Password") }}
                  </span>
                </v-col>
              </v-row>
            </v-col>
            <v-col>
              <v-row no-gutters>
                <v-col :cols="3">Change Password</v-col>
                <v-col :cols="7" :offset="1">
                  <v-text-field
                    v-model="formData.changePassword"
                    v-validate="'required'"
                    name="Change Password"
                    solo
                    dense
                    hide-details
                    class="white-input"
                    placeholder="change password"
                    type="password"
                  ></v-text-field>
                  <span class="vee-validate-error">
                    {{ errors.first("Change Password") }}
                  </span>
                </v-col>
              </v-row>
            </v-col>
            <v-col>
              <v-row no-gutters>
                <v-col :cols="3">Confirm Password</v-col>
                <v-col :cols="7" :offset="1">
                  <v-text-field
                    v-model="formData.confirmPassword"
                    v-validate="{
                      required: true,
                      is: formData.changePassword,
                    }"
                    name="Confirm Password"
                    solo
                    dense
                    hide-details
                    class="white-input"
                    placeholder="confirm password"
                    type="password"
                  ></v-text-field>
                  <span class="vee-validate-error">
                    {{ errors.first("Confirm Password") }}
                  </span>
                </v-col>
              </v-row>
            </v-col>
          </v-spacer>
        </v-form>
      </v-card>
    </template>
  </Dialog>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Dialog from "@/components/Maintenance/Dialog/Dialog.vue";
import VForm from "vuetify/src/components/VForm/index";
@Component({
  components: {
    Dialog,
  },
})
export default class ChangePasswordDialog extends Vue {
  newPassword = "123456";
  formData = {
    oldPassword: "",
    changePassword: "",
    confirmPassword: "",
  };

  resetForm() {
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this.formData, formData);
  }

  async save() {
    const result = await this.validateFormData();
    if (result) {
      console.log(result, "==result");
    }
  }

  async validateFormData() {
    const valid: boolean = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }

  getFormData() {
    return JSON.parse(JSON.stringify(this.formData));
  }
  mounted() {
    console.log("mounted");
  }
}
</script>
<style lang="scss" scoped></style>
